<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="java.util.List"%>
<%@ page import="com.neuedu.model.Food"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>

<head>
<meta charset="utf-8">
<title>Tasty - Recipes, Food Website and Blog Template -
	Responsive, Html5, CSS3, jquery</title>
<meta name="description"
	content="Recipes Template, Food Template Recipes Blog Template, cooking, Food, chef, Responsive Template, html5 Template, html5, css3, jquery, responsive">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="${pageContext.request.contextPath}/pages/js/html5.js"></script>
<link
	href='http://fonts.googleapis.com/css?family=Noticia+Text:400,400italic,700,700italic|Crete+Round:400,400italic|Lobster|Lobster+Two:400,400italic,700,700italic'
	rel='stylesheet' type='text/css'>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/pages/css/style.css">
<link id="color" rel="stylesheet"
	href="${pageContext.request.contextPath}/pages/css/color1.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/pages/fancybox/jquery.fancybox-1.3.4.css"
	media="screen" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/pages/css/mediaelementplayer.min.css" />
<link
	href="${pageContext.request.contextPath}/pages/colorbox/colorbox.jsp"
	rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<!--头部开始-->
	<header id="header" class="clearfix">
		<div class="headerstrip">
			<div class="spiral"></div>
		</div>

		<div class="container clearfix">
			<a href="${pageContext.request.contextPath}/pages/index.jsp"
				id="logo"> <img
				src="${pageContext.request.contextPath}/pages/images/logo.png"
				alt="Tasty Delicious Recipes">
			</a>
			<nav id="topnav">
				<ul>
					<li><a
						href="${pageContext.request.contextPath}/IndexWeb/findIndex.do"
						data-description="Home page">首页</a></li>

					<li class="active"><a
						href="${pageContext.request.contextPath}/pages/menu.jsp"
						data-description="Menu page">菜谱大全</a>
						<ul>
							<c:forEach items="${foodtype}" var="foodtype">
								<li><a
									href="${pageContext.request.contextPath}/MenuWeb/findFoodByTypeNo.do?typeNo=${foodtype.typeNo }">${foodtype.type }
								</a></li>
							</c:forEach>

						</ul></li>

					<li><a
						href="${pageContext.request.contextPath}/pages/cook.jsp"
						data-description="Cook page">食谱攻略</a>
						<ul>
							<c:forEach items="${foodmake}" var="foodmake">
								<li><a
									href="${pageContext.request.contextPath}/MenuWeb/findFoodByMakeNo.do?makeNo=${foodmake.makeNo }">${foodmake.make }</a></li>
							</c:forEach>

						</ul></li>

					<li><a
						href="${pageContext.request.contextPath}/IndexWeb/findAllInfo.do"
						data-description="News page">新闻资讯</a>
					<!--<ul>--> <!--<li><a href="blog-list.jsp">Blog list</a>--> <!--</li>-->
						<!--<li><a href="blog-single-gallery.jsp">Blog Single Gallery</a>-->
						<!--</li>--> <!--<li><a href="blog-single-image.jsp">Blog Single Image</a>-->
						<!--</li>--> <!--<li><a href="blog-single-slider.jsp">Blog Single Slider</a>-->
						<!--</li>--> <!--</ul>--></li>

					<li><a
						href="${pageContext.request.contextPath}/pages/ranking.jsp"
						data-description="Ranking page">美食排行</a></li>

					<li><a href="#" data-description="Personal Center">个人中心</a></li>

				</ul>
			</nav>
		</div>
	</header>


	<!--Middle Part Start-->
	<section class="container clearfix" id="maincontainer">
		<h1 class="heading1">
			菜谱<span>大全</span>
		</h1>
		<!--leftpart-->
		<section class="mb20 leftpart">
			<ul class="recipegrid">
				<c:forEach items="${foodByTypelist}" var="make">
					<li class="clearfix">
						<div class="recipegridimage">
							<img alt="" style="width: 280px; height: 250px"
								src="${pageContext.request.contextPath}/pages/${make.foodImg}">
						</div>
						<div class="recipedetails">
							<a class="title" href="menudetail.jsp">${make.foodName}</a>
							<p>${make.introduction}</p>
							<ul class="rate">
								<li class="on"></li>
								<li class="on"></li>
								<li class="on"></li>
								<li class="on"></li>
								<li class="off"></li>
							</ul>
							<a href="menudetail.jsp" class="fr">更 多 &gt;&gt;</a>
						</div>
					</li>
				</c:forEach>
			</ul>


			<!--paging-->
			<section class="paging">
				<ul>
					<li class="prev"><a href="#"><< 上一页 </a></li>
					<li><a href="#">1</a></li>
					<li class="current">2</li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li class="next"><a href="#">下一页 >></a></li>
				</ul>
			</section>
		</section>

		<!--Sidebar start-->
		<aside class="blogright">
			<div class="sidecontainer">
				<h4 class="heading4">搜索</h4>
				<input type="text" class="blogserach"
					onBlur="if(this.value=='')this.value='请输入要搜索的内容...';"
					onFocus="if(this.value=='请输入要搜索的内容...')this.value='';"
					value="请输入要搜索的内容...">
			</div>
			<div class="sidecontainer">
				<h4 class="heading4">菜谱分类</h4>
				<ul class="blogcaterg">
					<li><a
						href="${pageContext.request.contextPath}/pages/menu.jsp">凉菜 </a></li>
					<li><a
						href="${pageContext.request.contextPath}/pages/menu.jsp">热菜</a></li>
					<li><a
						href="${pageContext.request.contextPath}/pages/menu.jsp">甜品 </a></li>
					<li><a
						href="${pageContext.request.contextPath}/pages/menu.jsp">小吃</a></li>
					<li><a
						href="${pageContext.request.contextPath}/pages/menu.jsp">西餐 </a></li>
				</ul>
			</div>
			<div class="sidecontainer">
				<h4 class="heading4">新秀菜谱</h4>
				<div class="tabs-container">
					<div class="tabdata" id="tabdata1">
						<div class="popular">
							<ul class="popular">
								<li><img
									src="${pageContext.request.contextPath}/pages/images/recipethumb1.jpg"
									alt=""> <a
									href="${pageContext.request.contextPath}/pages/menudetail.jsp"
									class="entrytitle">Best Recipe of the World...</a>
									<div class="entry-meta">
										<span class="published">May 5, 2012</span> <span
											class="meta-sep">·</span> <span class="comment-count"><a>3
												Comments</a> </span>
										<ul class="rate">
											<li class="on"></li>
											<li class="on"></li>
											<li class="on"></li>
											<li class="on"></li>
											<li class="off"></li>
										</ul>
									</div></li>
								<li><img
									src="${pageContext.request.contextPath}/pages/images/recipethumb2.jpg"
									alt=""> <a
									href="${pageContext.request.contextPath}/pages/menudetail.jsp"
									class="entrytitle">Lorem ipsum dolor Lorem ipsum...</a>
									<div class="entry-meta">
										<span class="published">May 5, 2012</span> <span
											class="meta-sep">·</span> <span class="comment-count"><a>3
												Comments</a> </span>
										<ul class="rate">
											<li class="on"></li>
											<li class="on"></li>
											<li class="on"></li>
											<li class="on"></li>
											<li class="off"></li>
										</ul>
									</div></li>
								<li><img
									src="${pageContext.request.contextPath}/pages/images/recipethumb3.jpg"
									alt=""> <a
									href="${pageContext.request.contextPath}/pages/menudetail.jsp"
									class="entrytitle">Lorem ipsum dolor Lorem ipsum...</a>
									<div class="entry-meta">
										<span class="published">May 5, 2012</span> <span
											class="meta-sep">·</span> <span class="comment-count"><a>3
												Comments</a> </span>
										<ul class="rate">
											<li class="on"></li>
											<li class="on"></li>
											<li class="on"></li>
											<li class="on"></li>
											<li class="off"></li>
										</ul>
									</div></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</aside>
		<!--Sidebar end-->
	</section>

	<!--Footer Start-->
	<footer id="footer" class="clearfix">
		<div class="footerbg clearfix">
			<ul class="footersection container">
				<li class="testimonial">
					<h4>Testimonial</h4>
					<p class="testi">"Lorem Ipsum is simply dummy text of the
						printing and typesetting industry. Lorem Ipsum has been the
						industry's standard dummy text ever since the 1500s, when an
						unknown printer took</p> <span>Mr. Lorem Ipsum <br> C.E.O.
				</span>
				</li>
				<li class="links">
					<h4>Categories</h4>
					<ul>
						<li><a
							href="${pageContext.request.contextPath}/pages/recipedetails.jsp">Spicy
								Food Special</a></li>
						<li><a
							href="${pageContext.request.contextPath}/pages/recipedetails.jsp">Rice</a>
						</li>
						<li><a
							href="${pageContext.request.contextPath}/pages/recipedetails.jsp">Snacks</a>
						</li>
						<li><a
							href="${pageContext.request.contextPath}/pages/recipedetails.jsp">Spicy
								Sea Food</a></li>
						<li><a
							href="${pageContext.request.contextPath}/pages/recipedetails.jsp">
								Tasty Special Food</a></li>
					</ul>
				</li>
				<li class="twiitersection">
					<h4>Twitter</h4>
					<div id="twitter"></div>
				</li>
				<li class="flickrsection">
					<h4>Flickr</h4>
					<div id="flickr">
						<ul id="cbox" class="thumbs">
						</ul>
					</div>
				</li>
			</ul>
		</div>

		<!--Social links Start-->
		<section id="social" class="container">
			<div class="leftline">@2012 All images & icons are copyright to
				their owners.</div>
			<div id="footersocial">
				<a class="facebook" title="Facebook" href="#">Facebook</a> <a
					class="twitter" title="Twitter" href="#">Twitter</a> <a
					class="linkedin" title="Linkedin" href="#">Linkedin</a> <a
					class="blooger" title="Blogger" href="#">Blogger</a> <a class="rss"
					title="rss" href="#">rss</a> <a class="dig" title="Dig" href="#">Dig</a>
				<a class="googleplus" title="Googleplus" href="#">Googleplus</a> <a
					class="skype" title="Skype" href="#">Skype</a> <a class="flickr"
					title="Flickr" href="#">Flickr</a>
			</div>
		</section>
		<!--Social links End-->
		<!--Go to Top-->
		<a title="Go Top" id="gotop" href="#">&nbsp;</a>
	</footer>
	<!--Footer End-->

	<!--Javascripts-->
	<script
		src="${pageContext.request.contextPath}/pages/js/jquery-latest.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/js/jquery.easing.1.3.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/js/jquery.isotope.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/pages/js/mediaelement-and-player.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/js/jquery.flexslider-min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/js/jquery.elastislide.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/js/jquery.tweet.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/js/jquery.validate.js"></script>
	<script type="text/javascript"
		src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/js/jquery.gmap.js"></script>
	<script
		src="${pageContext.request.contextPath}/pages/js/jflickrfeed.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/pages/js/script.js"></script>
	<div style="display: none">
		<script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540'
			language='JavaScript' charset='gb2312'></script>
	</div>
</body>
</html>